<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>TTS Stream Test</title>
</head>

<body>
    <!-- 输入区域 -->
    <div>
        <button onclick="wsConnection()">连接</button>
        <input type="text" id="interview_id" placeholder="请输入会话ID">
        <input type="text" id="token" placeholder="请输入token">
    </div>
    <div>
        <audio id="ttsPlayer" controls></audio>
    </div>

    <script>
        let ws;
        let audioContext;
        let input;
        let processor;
        let accumulatedData = [];
        const sampleRate = 16000;
        const bufferSize = 4096;
        let isAudioPlaying = false;

        async function wsConnection() {
            try {
                // 1. 先获取音频设备权限
                const stream = await navigator.mediaDevices.getUserMedia({
                    audio: {
                        channelCount: 1,           // 单声道
                        sampleRate: sampleRate,    // 采样率16000Hz
                        echoCancellation: true,    // 开启回声消除
                        noiseSuppression: true     // 开启降噪
                    }
                });

                // 设置音频处理
                audioContext = new AudioContext({
                    sampleRate: sampleRate,        // 设置音频上下文的采样率
                    latencyHint: 'interactive'
                });

                input = audioContext.createMediaStreamSource(stream);
                processor = audioContext.createScriptProcessor(bufferSize, 1, 1);

                input.connect(processor);
                processor.connect(audioContext.destination);

                // 处理音频数据
                processor.onaudioprocess = (e) => {
                    if (ws && ws.readyState === WebSocket.OPEN && !isAudioPlaying) {
                        const inputData = e.inputBuffer.getChannelData(0);
                        const pcmData = new Int16Array(inputData.length);
                        for (let i = 0; i < inputData.length; i++) {
                            pcmData[i] = Math.max(-32768, Math.min(32767, inputData[i] * 0x7FFF));
                        }
                        // Just accumulate data
                        accumulatedData.push(...pcmData);
                    }
                };

                // 2. 开始连接后端 ws 接口
                ws = new WebSocket('wss://www.ointerview.com/conversation2?token=' + document.getElementById('token').value);


                ws.onopen = function () {
                    console.log('连接成功');
                    interview_id = document.getElementById('interview_id').value;
                    ws.send(JSON.stringify({ "operation_type": "start", "interview_id": interview_id }));

                    // Start sending data at 1-second intervals
                    sendInterval = setInterval(() => {
                        if (ws && ws.readyState === WebSocket.OPEN && !isAudioPlaying && accumulatedData.length > 0) {
                            // Send approximately 1 second of audio data
                            const dataToSend = accumulatedData.slice(0, sampleRate);
                            ws.send(new Int16Array(dataToSend).buffer);
                            accumulatedData = accumulatedData.slice(Math.min(sampleRate, accumulatedData.length));
                            console.log("Sent 1 second of audio data");
                        }
                    }, 1000);
                };

                ws.onmessage = function (e) {
                    console.log('收到消息：', e.data);
                    const data = JSON.parse(e.data);
                    if (data.code === 0 && data.data && data.data.question_url) {
                        const audio = document.getElementById('ttsPlayer');
                        audio.src = data.data.question_url;
                        audio.play();
                    }
                };

                ws.onclose = function () {
                    console.log('连接关闭');
                    clearInterval(sendInterval);
                };

                ws.onerror = function () {
                    console.log('连接出错');
                };
            } catch (error) {
                console.error('获取音频设备权限失败:', error);
            }
        }
    </script>
</body>

</html>